{include file="index/_meta" /}
    <title></title>
    <style>
        .shop{
            background: #fff;
            margin-top: 10px;
        }
        .goodsInfo{
            background: #fff;
            padding: 10px;
        }
        .goodsInfo p,.shop p{
            margin: .3em 0;
        }
        .content{
            margin-top: 10px;
            background: #fff;
            padding: 10px;
        }
        .content img{
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <van-nav-bar
            title="详情"
            left-text="返回"
            left-arrow
            @click-left="window.history.back();"
    ></van-nav-bar>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in info.carousel" :key="index">
                <van-image height="150" :src="item" ></van-image>
            </van-swipe-item>
        </van-swipe>

        <div class="goodsInfo">
            <van-row>
                <van-col span="24"><p style="font-size: 1.2em;">{{info.name}}</p></van-col>
            </van-row>
            <van-row>
                <van-col span="12"><p style="color: red;"><small>￥</small>{{info.price}}</p></van-col>
                <van-col span="12"><p style="text-align: right;font-size: 12px;color: #bdbdbd;">库存：{{info.stock}}</p></van-col>
            </van-row>
        </div>

        <div class="content" style="margin-bottom:65px;">
            <div v-html="info.content"></div>
        </div>

        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" @click="chat"></van-goods-action-icon>
            <van-goods-action-button type="warning" text="立即购买" @click="buy"></van-goods-action-button>
        </van-goods-action>

<!--        客服-->
        <van-popup v-model="showCustomer" position="bottom" closeable round>
            <div style="padding: 20px">
                <p style="text-align: center">点击拨打客服电话</p>
                <p>技术支持：<a :href="'tel:15563995229'">15563995229</a></p>
                <p>厂家客服：<a :href="'tel:'+info.shop_phone">{{info.shop_phone}}</a></p>
            </div>
        </van-popup>

<!--        sku选择-->
        <van-sku
                v-model="show"
                :sku="sku"
                :goods="{picture:info.img_thumb}"
                :goods-id="goods_id"
                :quota="info.limit_buy"
                :quota-used="info.use_buy"
                :show-add-cart-btn="no"
                @buy-clicked="onBuyClicked"
        ></van-sku>


    </van-pull-refresh>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    goods_id: "{$Think.get.goods_id}",
                    share_id: "{$Think.get.share_id}",
                    user_id: "{$Think.session.wechat.id}",
                    info:[],
                    isLoading:false,
                    showCustomer:false,
                    show:false,
                    customStepperConfig: {},
                    no:false,
                    yes:true,
                    sku: {
                        tree: [],
                        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                        list: [],
                        price: '0', // 默认价格（单位元）
                        stock_num: 0, // 商品总库存
                        collection_id: 0, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                        none_sku: false, // 是否无规格商品
                        messages: [],
                        hide_stock: false // 是否隐藏剩余库存
                    }
                }
            },
            created(){
                // 整个页面的背景色
                document.body.style.backgroundColor="#ddd";
                this.getGoodsDetail()
            },
            methods:{
                getGoodsDetail(){
                    let that = this
                    axios.post("{:url('goods/getGoodsDetail')}",{
                        goods_id:that.goods_id,
                    }).then(function (ret) {
                        that.info = ret.data.data
                        that.sku = ret.data.data.sku
                        that.share()
                    })
                },
                onRefresh(){
                    this.getGoodsDetail()
                },
                chat(){
                    this.showCustomer = true
                },
                buy(){
                    this.show = true
                },
                // 立即购买
                onBuyClicked(data){
                    console.log(data)
                    let selectedSkuComb = data.selectedSkuComb
                    window.location.href = "{:url('order/create')}?goods_id="+data.goodsId+"&num="+data.selectedNum+"&price="+(selectedSkuComb.price/100)+"&s1="+selectedSkuComb.s1+"&s2="+selectedSkuComb.s2+"&s3="+selectedSkuComb.s3+"&sku_id="+selectedSkuComb.id+"&share_id="+this.share_id
                },
                share(){
                    let that = this
                    wx.ready(function () {
                        let link = "{$url}?goods_id="+that.goods_id+"&share_id="+that.user_id
                        let title = that.info.name
                        let desc = that.info.desc
                        let img_thumb = that.info.img_thumb
                        wx.updateAppMessageShareData({
                            title: title, // 分享标题
                            desc: desc, // 分享描述
                            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: img_thumb, // 分享图标
                        })

                        wx.updateTimelineShareData({
                            title: title, // 分享标题
                            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: img_thumb, // 分享图标
                        })

                        wx.onMenuShareWeibo({
                            title: title, // 分享标题
                            desc: desc, // 分享描述
                            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: img_thumb, // 分享图标
                        });
                    })
                },
            },

        })
    </script>
</div>
</body>
</html>
